<template>
	<div class="shopcart">
		<div class="shopcart_header">
			
			<p>订单</p>
		</div>
		<div class="header">
			<ul style="display: flex;justify-content: space-around;margin-top:0.2rem;width:100%;color:black;height:5vh;">
				<li v-for="(item,index) in navs" @click="changeNav(index)" :class="chooseId==index?'is-selected':''">{{item}}</li>
			</ul>
		</div>
		<div id="">
			<div class="content">
				<ul>
					<router-link tag="li" class="li" :to='"/indentDetail/"+item.id' v-show="data.length>0" v-for="item in data.data">
						<p class="first-content"><span>{{item.orderNo}}</span></p>
						<div class="img">
							<img :src="item.goodsImg" alt="" />
						</div>
						<div class="font">
							<h5>{{item.goodsId}}</h5>
							<p>{{item.goodsName}}</p>
							<a>{{item.storeId}}</a>
						</div>
						<div class="right">
							<p>￥{{item.orginPrice}}</p>
							<s>￥{{item.price}}</s>
						</div>
					</router-link>
				</ul>
			</div>
			</hr>
			<div v-show="data.length<=0" class="length">
				<span>
   				暂无数据
   			</span>
				<hr />
			</div>
		</div>

	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				navs: ['全部', '待付款', '待发货', "待收货", "待评论"],
				chooseId: 0,
				result: [],
				data: []
			}
		},
		created() {
			this.getInfo()
			
		},	
		activated() {
			this.getInfo()
			alert('ss');
		},
		methods: {
			finddetail(id) {
				this.$router.push({
					path: "/indentDetail",
					query: {
						id: id
					}
				})
			},
			changeNav(index) {
				this.chooseId = index;
				this.data = [];
//				for(let i = 0; i < this.result.length; i++) {
//					if(this.result[i].state == this.navs[index]) {
//						this.data.push(this.result[i])
//					}
//					console.log(this.data);
//				}
				//				filter  过滤数组
				if(this.navs[index] == "全部") {
					this.result =  this.data 
					console.log(this.data);
				} else {
					this.result = this.data.filter((p) => {
						return p.state == this.navs[index]
					})
				}

			},
			getInfo() {
				var url = "http://develop.jhjvip.cn:8080/mall/mobile/orders/myorders?token=201801221658467856bc6deb0c47374fac992e3f065d5f495b&appId=D7B72681-8205-4C8F-8CCB-142C448203E3"
				
				this.$http.get(url).then(res => {
					this.data = res.data.orderList;
					console.log(res.data); 
//console.log(res.data)
				})

			}

		}
	}
</script>

<style scoped>
	body {
		margin: 0;
		padding: 0;
	}
	
	.shopcart {
		width: 100%;
		height: 100%;
	}
	
	ul li {
		list-style: none;
	}
	
	.shopcart_header {
		width: 100%;
		height: 1rem;
		border-bottom: 1px solid gainsboro;
		display: flex;
		position: fixed;
		top: 0;
		justify-content: center;
		background: white;
	}
	
	.shopcart_header p {
		text-align: center;
		font-size: 0.4rem;
		line-height: 1rem;
		font-weight: bold;
	}
	
	.header {
		position: fixed;
		left: 0;
		top: 1rem;
		right: 0;
		height: 1rem;
		background: white;
		width: 100%;
		margin-top: 0.2rem;
		overflow: hidden;
		display: flex;
		justify-content: center;
	}
	
	.content {
		background: white;
		margin-top: 2.5rem;
	}
	
	.is-selected {
		color: #FE4070;
		padding-bottom: 0.25rem;
		border-bottom: 0.05rem solid #FE4070;
	}
	
	.length {
		margin-top: 2.2rem;
		font-size: 0.5rem;
	}
	/*	/*
	.right{
		width:10%;
		float:right;
	}
	
	.font p{
		color:#7E8C8D;
		margin-top: 1vh;
		margin-bottom: 2vh;
	}
	.font a{
		text-decoration: none;
		color:red;
		border:1px solid #ccc;
		border-radius:5px;
	}
	
	.img img{
		width:100%;
		height:12vh;
		margin-left:1vw;
	}
	.content ul li{
		list-style: none;
	}
	
	.first-content{
		display: flex;
		justify-content: space-between;
		margin-left:2vw;
		height:6vh;
		line-height: 6vh;
		font-size: 0.6rem;
	}
	.li{
		height:19vh;
		margin-top: 2vh;
		background: #bbbbbbb;
	}
	.first-content span{
		color:orange;
		margin-right: 2vw;
	}
	.font{
	float:left;
		width:58%;
		margin-left: 2vw;
	}
	.font p{
		color:#7E8C8D;
		margin-top: 1vh;
		margin-bottom: 2vh;
	}*/
</style>